<template>
<div class="homePage">
  <NoticeBoard></NoticeBoard>
  <div class="main"
       v-loading="loading"
       element-loading-text="获取数据中……"
       element-loading-spinner="el-icon-loading">
    <div class="home">
      <div v-if="list.length <=0">
        <el-empty description="空空如也……"></el-empty>
      </div>
      <div class="items" v-else>
        <div class="item" v-if="list" v-for="item in list" :key="item.id">
          <SingleNotice :notice="item"></SingleNotice>
        </div>
      </div>
    </div>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="total"
        :current-page="pageNum"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</div>
</template>

<script>
import SingleNotice from '../components/SingleNotice';
import NoticeBoard from '../components/NoticeBoard';
import qs from 'qs'
export default {
  name: 'Lost',
  components: {
    SingleNotice,
    NoticeBoard
  },
  data(){
    return{
      list:[],
      total: 0,
      pageNum: 1,
      loading: false
    }
  },
  created () {
    this.getData(0,8);
  },
  methods:{
    //请求数据库数据的方法
    getData(offset,limit){
      this.loading = true
      this.axios.post('/php/select.php', qs.stringify({
        offset: offset,
        limit: limit,
        type: '寻物启事'
      }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
        if(res.data === 0){
          this.total = 0;
          this.list = [];
          this.loading = false;
          return;
        }
        this.total = res.data.total
        this.list = res.data.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err)
      })
    },
    handleCurrentChange(val){
      this.list = [];
      this.getData((val-1)*8,(val-1)*8+8);
    }
  }
}
</script>

<style>

.resultTitle p {
  font-weight: bolder;
}

.resultTitle span {
  color: red;
}

.homePage{
  margin-top: 70px;
}
.home{
  display: flex;
  justify-content: center;
  padding: 0.5rem;
  /*margin-top: 60px;*/
}

.items{
  width: 90%;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}

.item{
  border: 2px solid #F1F2F3;
  margin: 0.5%;
  width: 320px;
  height: 390px;
}

.pages{
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
/*pad端适配*/
@media screen and (min-width: 600px) and (max-width: 1300px){
  .items{
    justify-content: space-between;
  }
  .item{
    width: 45%;
  }
}
@media (max-width: 600px) {
  .home{
    padding: 0;
  }
  .items{
    width: 95%;
    flex-direction: column;
  }
  .item{
    margin-top: 0.3rem;
    border-radius: 10px;
    background-color: white;
    width: 94%;
    height: auto;
    padding: 0 0 0 5%;
  }
}
</style>
